<template>
  <div class="header">
    <div class="header-box">
      <div class="header_left">
        <span class="header_text" @click="toMain">首页</span>
        <span class="header_text">地区</span>
      </div>
      <div class="header_right">
        <span class="header_text" @click="toCart" ref="goodsList">🛒购物车</span>
        <span class="header_text" @click="toTest0">测试0</span>
        <span class="header_text">个人中心</span>
        <span class="header_text">我的订单</span>
        <span class="header_text" @click="toStars">收藏夹</span>
        <span class="header_text">全部商品</span>
        <span class="header_text">网站导航</span>
      </div>
    </div>
    <div class="header-tools">
      <img src="@/assets/logo.png" alt="LOGO" class="header-logo" @click="toMain">
      <div class="header-search">
        <input v-model="searchKey" class="search-blank" placeholder="请输入关键字……">
        <div class="search-text">搜索</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navigator",
  data () {
    return {
      searchKey: "",
    }
  },
  methods: {
    toMain () {
      if (location.hash !== "#/MainPage") {
        this.$router.push("MainPage")
      }
    },
    toCart () {
      if (location.hash !== "#/Cart") {
        this.$router.push("Cart")
      }
    },
    toStars () {
      if (location.hash !== "#/Stars") {
        this.$router.push("Stars")
      }
    },
    toTest0 () {
      if (location.hash !== "#/test0") {
        this.$router.push("test0")
      }
    }
  }
}
</script>

<style scoped>
.header{
  font-size: 18px;
}
.header-box{
  display: flex;
  padding: 16px;
  background-color: blanchedalmond;
}
.header_left{
  width: 50%;
  left: 0;
  text-align: left;
}
.header_right{
  width: 50%;
  right: 0;
  text-align: right;
}
.header_text{
  padding: 8px;
  cursor: pointer;
}
.header-tools{
  display: flex;
  justify-content: space-between;
  padding: 16px;
}
.header-logo{
  height: 80px;
  cursor: pointer;
}
.header-search{
  display: flex;
  height: 40px;
  margin-right: 40px;
}
.search-blank{
  width: 200px;
  margin-top: 20px;
  height: 32px;
  font-size: 20px;
}
.search-text{
  padding: 0 8px;
  margin-top: 20px;
  height: 38px;
  line-height: 38px;
  font-size: 24px;
  background-color: orangered;
  color: white;
  cursor: pointer;
}
</style>